<!-- 刺影神斩  神龙战刃  神月战刃  满100低30充值  1000抵500  满500抵200  满2000抵800  10万元宝  鞭尸斗笠【神月斗笠。鞭尸】谢谢参与  -->
<template>
  <div>
    <div class="logo">
      <img :src="zp" style="animation-fill-mode: forwards" width="100%" :class="animation"/>
      <img :src="isStart ? stop : zz" class="zhi-zhen" @click="handleClick"/>
    </div>
  </div>
</template>

<script>
import zz from '@/assets/zzz.png'
import zp from '@/assets/zp.png'
import stop from '@/assets/stopzz.png'
import { MessageBox } from 'element-ui'

export default {
  name: 'Rotate',
  data () {
    return {
      zz,
      zp,
      stop,
      isStart: false,
      animation: '',
      index: 0
    }
  },
  mounted () {
    this.getDay()
    this.index = localStorage.getItem('temp') || 0
  },
  methods: {
    handleClick () {
      if (this.isStart) {
        this.isStart = false
        const res = this.random()
        this.animation = res.style

        setTimeout(() => {
          this.$emit('StopRotate', res.index)
        }, 1000)
      } else {
        if (this.index >= 3) {
          MessageBox.alert('今天您已经没有抽奖机会了，请明天再来^ _ ^', '', {
            confirmButtonText: '确定',
            callback: action => {}
          })
        } else {
          this.isStart = true
          this.animation = 'refresh-animation'
          localStorage.setItem('temp', this.index + 1)
        }
      }
    },
    random () {
      const index = Math.round(Math.random() * 10)
      if (index === 0) {
        const i = Math.round(Math.random() * 10)
        if (i === 2) {
          return { style: 'over-animation2', index: '刺影神斩' }
        } else if (i === 6) {
          return { style: 'over-animation6', index: '神月战刃' }
        } else if (i === 8) {
          return { style: 'over-animation8', index: '神月斗笠·鞭尸' }
        } else if (i === 10) {
          return { style: 'over-animation3', index: '满500抵200充值卷' }
        } else {
          return { style: 'over-animation3', index: '满500抵200充值卷' }
        }
      } else {
        if (index === 1 || index === 2) {
          return { style: 'over-animation1', index: '满100抵30充值卷' }
        } else if (index === 3 || index === 6) {
          return { style: 'over-animation3', index: '满500抵200充值卷' }
        } else if (index === 4) {
          return { style: 'over-animation4', index: '10万元宝' }
        } else if (index === 5 || index === 10) {
          return { style: 'over-animation5', index: '满1000抵500充值卷' }
        } else if (index === 7) {
          return { style: 'over-animation7', index: '满2000抵800充值卷' }
        } else if (index === 9) {
          return { style: 'over-animation9', index: '0' }
        } else {
          return { style: 'over-animation3', index: '满500抵200充值卷' }
        }
      }
    },
    // 每日清空localStorage
    getDay () {
      const myDate = new Date()
      const day = `${myDate.getDate()}`
      const hDay = localStorage.getItem('day')
      if (hDay) {
        if (hDay !== day) {
          localStorage.setItem('day', day)
          localStorage.removeItem('temp')
        }
      } else {
        localStorage.setItem('day', day)
      }
    }
  }
}
</script>

<style scoped>

.logo {
  width: 400px;
  height: 400px;
  position: relative;
}

.zhi-zhen {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -70px;
  margin-top: -74px;
  width: 140px;
  height: 155px;
}

.refresh-animation {
   animation: rotate 0.5s linear infinite;
}

.over-animation1 {
  animation: stop1 0.5s linear;
}
.over-animation2 {
  animation: stop2 0.5s linear;
}
.over-animation3 {
  animation: stop3 0.5s linear;
}
.over-animation4 {
  animation: stop4 0.5s linear;
}
.over-animation5 {
  animation: stop5 0.5s linear;
}
.over-animation6 {
  animation: stop6 0.6s linear;
}
.over-animation7 {
  animation: stop7 0.7s linear;
}
.over-animation8 {
  animation: stop8 0.8s linear;
}
.over-animation9 {
  animation: stop9 0.9s linear;
}
.over-animation10 {
  animation: stop10 1s linear;
}

@keyframes rotate {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}

@keyframes stop1 {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(18deg);
  }
}

@keyframes stop2 {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(54deg);
  }
}

@keyframes stop3 {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(90deg);
  }
}

@keyframes stop4 {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(126deg);
  }
}

@keyframes stop5 {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(162deg);
  }
}

@keyframes stop6 {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(198deg);
  }
}

@keyframes stop7 {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(234deg);
  }
}

@keyframes stop8 {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(270deg);
  }
}

@keyframes stop9 {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(306deg);
  }
}

@keyframes stop10 {
  0%{
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(342deg);
  }
}
</style>
